import {EMPTY_KV, EmptyIfNull, Kv, ModeProp} from "./BaseCompomentDef.tsx";
import {LabelPredicateButton, PredicateButton} from "./ShowButton.tsx";
import {Form, Input, Modal, Space, Table} from "antd";
import {useState} from "react";


interface RouteMetadataProp extends ModeProp {

    metadata? : Kv

    onChange? : ( metadata : Kv ) => void

}

export const RouteMetadata = ( prop : RouteMetadataProp ) => {
    const mode = prop.mode || 'display'
    const readOnly = mode === 'display'

    const metadata : Kv = prop.metadata || EMPTY_KV

    const onChange = EmptyIfNull( prop.onChange )

    const _onChangeKey = ( str : string ) => {
        onChange( { ...metadata , key : str }  )
    }

    const _onChangeValue = ( str : string ) => {
        onChange( { ...metadata , value : str }  )
    }

    return <>
        <Form>
            <Form.Item label="key">
                <Input
                    readOnly={readOnly}
                    value={metadata.key}
                    onChange={(e) => { _onChangeKey(e.target.value) }}
                />
            </Form.Item>
            <Form.Item label="value">
                <Input
                    readOnly={readOnly}
                    value={ metadata.value }
                    onChange={(e) => { _onChangeValue(e.target.value) }}
                />
            </Form.Item>
        </Form>
    </>

}

interface RouteMetadataTableProp extends ModeProp {

    metadata? : object

    onAppend? : ( metadata : Kv) => void

    onModify? : ( metadata : Kv , index : number ) => void

    onRemove? : ( metadata : Kv , index : number ) => void

}


interface RouteMetadataOpt extends ModeProp {

    metadata : Kv ,

    index : number

}

const EMPTY_ROUTE_METADATA_OPT : RouteMetadataOpt = {

    metadata : EMPTY_KV ,

    index : -1 ,

    mode : 'none'

}

export const RouteMetadataTable = ( prop : RouteMetadataTableProp ) => {

    const mode = prop.mode || 'display'
    const editable = mode === 'create' || mode === 'modify'
    const metadata = prop.metadata || {}
    const metadataList : Kv[] = Object.entries(metadata).map( kv => {
        return { key : kv[0] , value : kv[1] }
    })

    const onAppend = EmptyIfNull( prop.onAppend )
    const onModify = EmptyIfNull(prop.onModify)
    const onRemove = EmptyIfNull(prop.onRemove)

    const [ _metadataOpt , _setMetadataOpt ] = useState( EMPTY_ROUTE_METADATA_OPT )

    const _onAppend = () => {
        _setMetadataOpt( {  ...EMPTY_ROUTE_METADATA_OPT , mode : 'create'  } )
    }

    const _onDisplay = ( e : Kv ) => {
        _setMetadataOpt( {  metadata : e , mode : 'display' , index : -1  } )
    }

    const _onModify = ( e : Kv , index : number ) => {
        _setMetadataOpt( {  metadata : e , index : index , mode : 'modify'  } )
    }

    const _onRemove = ( e : Kv , index : number ) => {
        onRemove( e , index )
    }


    const _onCommit = () => {
        if ( _metadataOpt.mode === 'modify' ) {
            onModify( _metadataOpt.metadata , _metadataOpt.index )
        } else if ( _metadataOpt.mode === 'create' ) {
            onAppend( _metadataOpt.metadata )
        }
        _setMetadataOpt( EMPTY_ROUTE_METADATA_OPT )
    }

    const _onCancelCreateOrModify = () => {
        _setMetadataOpt( EMPTY_ROUTE_METADATA_OPT )
    }

    const _onChangeMetadata = ( e : Kv ) => {
        _setMetadataOpt( { ..._metadataOpt , metadata : e } )
    }


    return <>
        <Modal
            closable={false}
            onOk={ _onCommit }
            open={ _metadataOpt.mode === 'modify' || _metadataOpt.mode === 'create' }
            onCancel={ _onCancelCreateOrModify }
        >
            <RouteMetadata
                mode={ _metadataOpt.mode }
                metadata={ _metadataOpt.metadata }
                onChange={ _onChangeMetadata }
            />

        </Modal>
        <Table
            dataSource={metadataList}
            title={ () =>
                <LabelPredicateButton show={ editable } label="metadata" onClick={_onAppend} >append</LabelPredicateButton>
            }
        >
            <Table.Column title="key" render={ ( _ , ep : Kv )=> {
                return <> { ep.key } </>
            } } />
            <Table.Column title="value" render={ ( _ , ep : Kv )=> {
                return <> { ep.value } </>
            } }  />
            <Table.Column
                width={256}
                title="action"
                render={ ( _ , ep : Kv , index  )=> { return <>
                    <Space>
                        <PredicateButton show={!editable} onClick={ ()=>{ _onDisplay(ep) } } > display </PredicateButton>
                        <PredicateButton show={editable} onClick={ ()=>{ _onModify( ep , index ) } } > modify </PredicateButton>
                        <PredicateButton show={editable} onClick={()=>{ _onRemove(ep,index) }}> delete </PredicateButton>
                    </Space>
                </>}}
            />
        </Table>
    </>

}